<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>二维码生成</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            /*设置盒模型*/
            box-sizing: border-box;
            /*移动端所特有的点击高亮效果*/
            -webkit-tap-highlight-color: transparent;
        }

        .line {
            display: flex;
            margin: 20px auto;
            max-width: 1100px;
            text-align: center;
        }

        #input_text {
            padding: 10px;
            padding-top: 20px;
            padding-bottom: 20px;
            flex: 2;
            /*防止拖动 */
            resize: none;
            outline: none;
            height: 300px;
            font-size: 20px;
            margin: 10px;
            border: none;
            border-radius: 4px;
            box-shadow: -1px -1px 9px -1px #e7e7e7;
        }

        #input_text:hover {
            /*box-shadow: -1px -1px 9px -1px #a2a2a2;*/
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .28);
        }

        #qrcodeb {
            flex: 1.3;
            display: flex;
            padding: 10px;
            margin: 10px;
            box-sizing: border-box;
            border-radius: 4px;
            box-shadow: -1px -1px 9px -1px #e7e7e7;
            flex-direction: column;
        }

        #qrcode {
            margin: auto;
        }
        #download {
            margin: auto;
            color: rgba(18, 18, 18, 0.97);
            background: #e7e7e7;
            width: 100px;
            padding: 8px;
            border-radius: 3px;
            /*align-items:center;*/
            /*justify-content:center;*/
            display: none;
            font-size: 18px;
            font-weight: 600;

        }
    </style>
</head>
<body>
<div class="line">
    <textarea id="input_text" placeholder="请输入链接,Enter确认"></textarea>
    <div id="qrcodeb">
        <div id="qrcode"></div>
        <div id="download">下载</div>
    </div>
</div>

<script  src="./js/qrcode.min.js" ></script>

<script type="text/javascript">
    var input_text = document.getElementById("input_text");
    var download = document.getElementById("download");
   var qucode= document.getElementById("qrcode");
    var qrcodebuilder = new QRCode(qucode, {
        text: input_text.value,
        width: 198,
        height: 198,
        colorDark: "#015d28",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });
    input_text.oninput = function () {
        if(input_text.value.length===0){
            // download.style.display='none'
        }
    }
    download.onclick = function () {
        //获取网页中的canvas对象转换为img
        var mycanvas1=qrcode.getElementsByTagName('canvas')[0];
        mycanvas1.style.display = 'none'//隐藏生成的canvas
        //新Image对象，可以理解为DOM
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
        // 指定格式 PNG
        var url = mycanvas1.toDataURL("image/png");
        var a = document.createElement('a');          // 创建一个a节点插入的document
        var event = new MouseEvent('click')           // 模拟鼠标click点击事件
        a.download = 'qrcode'                  // 设置a节点的download属性值
        a.href = url;                                 // 将图片的src赋值给a节点的href
        a.dispatchEvent(event)                        // 触发鼠标点击事件
    }
    input_text.onkeydown=function (e) {
        e=e||window.event;
        // console.log(e)
        // console.log(e.keyCode)
        if (e.keyCode ===13 ){
            qrcodebuilder.clear();
            qrcodebuilder.makeCode(input_text.value);
            download.style.display='block'
            return false;
        }
        qrcode.download
    }
</script>

<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?41cc1334afa3eded19a39d7628ed3a01";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
</body>
</html>